<template>
  <el-card>
    <div slot="header">
      <h3>批量获取品类信息</h3>
    </div>
    <div>
      <skus-table
        :defaultMinWidth="120"
        :loading="TableInfo.loading"
        :columns="TableInfo.columns"
        :dataSource="TableInfo.list"
      >
        <BtnRender slot="content_context" :render="renderBtnsBar" />
      </skus-table>
    </div>
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import { TABLE_COLUMNS } from './constants/batchGetCate';
import { TableInfo } from '@/utils/getUtils';
import { getListPageBtnsBar } from '@/utils/getBtnsRender';
import { createExcelByExport, generateUuid, isResponseSuccess } from '@/utils/bizUtils';
import {
  exportCategoryPredictionsExcelService,
  importCategoryPredictionsExcelUrl
} from '@/api/commodity/commodityAccessManage/commodityToPerfect';
export default {
  components: {
    SkusTable,
    BtnRender
  },
  data () {
    return {
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      btnLoading: {
        exportTemp: false,
        exportData: false
      }
    }
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnBars = [
        {
          label: '导出模板',
          method: this.handleExportTemp,
          loading: this.btnLoading.exportTemp
        },
        {
          label: '导入商品信息',
          action: importCategoryPredictionsExcelUrl,
          methods: { handleUploadSuccess: this.handleUploadSuccess },
          isImport: true,
          loadingFn: this.TableInfo.setLoading
        },
        {
          label: '导出数据',
          method: this.handleExportData,
          disabled: this.TableInfo.isNullList(),
          loading: this.btnLoading.exportData
        },
      ]
      return getListPageBtnsBar(h, btnBars)
    },
    // 导出模板
    async handleExportTemp () {
      const data = []
      const loadingFn = state => { this.btnLoading.exportTemp = state }
      const res = await exportCategoryPredictionsExcelService(data, loadingFn)
      createExcelByExport({ excelTitle: `批量获取品类信息模板_${generateUuid()}`, res })
    },
    // 导出数据
    async handleExportData () {
      const data = this.TableInfo.list
      const loadingFn = state => { this.btnLoading.exportData = state }
      const res = await exportCategoryPredictionsExcelService(data, loadingFn)
      createExcelByExport({ excelTitle: `批量获取品类信息数据_${generateUuid()}`, res })
    },
    // 导入商品信息成功
    handleUploadSuccess (res) {
      if (isResponseSuccess(res)) {
        this.TableInfo.setList(res.retData)
      }
    }
  }
}
</script>
